<template>
	<div class="geshou">
		<header>
			<van-nav-bar
			  right-text="注册"
			  left-arrow
			  @click-left="onClickLeft"
			   @click-right="onClickRight"
			  style="background: #f7f7f7;"
			></van-nav-bar>
		</header>
		
		<section class="login_nav" style="color: #A8A8A8;padding: 44px 30px 0;">
			<h1>登录</h1>
			<h3>Welcome back</h3>
			<p>账号</p>
			<van-cell-group>
			  <van-field v-model="value" placeholder="请输入账号" ></van-field>
			</van-cell-group>
			<p>密码</p>
			<van-cell-group style="margin-bottom: 50px;">
			  <van-field v-model="value" placeholder="请输入密码" ></van-field>
			</van-cell-group>
			<van-button round style="padding: 0 70px;margin-left: 75px;">登录</van-button>
			
			<div class="dsfsr">
				<dd>第三方登录</dd>
			</div>
			
			<ul class="login_footer">
				<router-link to="#" tag="li">
					<img src="../../build/logo.png" width="34" height="29" />
					<p>QQ</p>
				</router-link>
				<router-link to="#" tag="li">
					<img src="../../build/logo.png" width="34" height="29" />
					<p>微博</p>
				</router-link>
				<router-link to="#" tag="li">
					<img src="../../build/logo.png" width="34" height="29" />
					<p>手机</p>
				</router-link>
			</ul>
		</section>
		
		
	</div>
</template>

<script>
	import { NavBar ,NoticeBar,Cell, CellGroup,Field,Button} from 'vant'
	
	export default{
		name:'Login',
		components:{
			[NavBar.name]:NavBar,
			[NoticeBar.name]:NoticeBar,
			[Cell.name]:Cell,
			[CellGroup.name]:CellGroup,
			[Field.name]:Field,
			[Button.name]:Button
		},
		data(){
			return{
				src:''
			}
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1);
			},
			onClickRight(){
				
			}
		},
	}
</script>

<style>
	.geshou{
		height: 100vh;
	display: flex;
	flex-direction: column;
	}
	section>.login_nav{
	flex: 1;
	overflow: auto;
}
	.login_nav p{
		margin: 23px 0  8px;
	}
	.login_nav .van-cell{
		border: #A8A8A8 1px solid;
		border-radius: 70px;
	}
	.dsfsr{
		width: 90%;
		background: url(../assets/hengxian.png) center repeat-x;
		margin: 35px auto;
	}
	.dsfsr dd{
		background: #fff;
		width: 120px;
		margin: 0 auto;
		text-align: center;
	}
	.login_footer{
		display: flex;
		justify-content: space-around;
	}
	.login_footer p{
		color: #000;
		font-size: 16px;
		margin: 10px 0;
		text-align: center;
	}
</style>